<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="jquery.selectMultiple.js"></script>
	<link rel="stylesheet" type="text/css" href="select_multiple.css">
	<script type="text/javascript">
	$(document).ready(function() {
		lista = [
			{id:'01',de:'4587654 dfsdf86543636 tiempo',es:false},
			{id:'02',de:'4587654 dfsdf86543636 costo',es:false},
			{id:'03',de:'4587654 dfsdf86543636 calidad',es:true},
			{id:'04',de:'4587654 dfsdf86543636 alcance',es:true}
			];

		criterio = [
			{id:'A1',de:'tiempo',es:true},
			{id:'B1',de:'costo',es:false},
			{id:'C1',de:'calidad',es:true},
			{id:'D1',de:'alcance',es:false}
			];

		$.selectMultiple({
			elemento : '#filtro',
			array : lista
		});

		$.selectMultiple({
			elemento : '#filtro_mc',
			array : criterio
		});


		$('#save_filtro').on('click',function(){
			$('#filtro input[type=checkbox]:checked').each(function(){
				console.log($(this).val());
			});
		});

		$('#save_filtro_mc').on('click',function(){
			$('#filtro_mc input[type=checkbox]:checked').each(function(){
				console.log($(this).val());
			});
		});
	});
	</script>
</head>
<body>
	<div id='filtro'></div>
	<input type="button" id='save_filtro' value='procesa'>
	<br>
	<div id='filtro_mc'></div>
	<input type="button" id='save_filtro_mc' value='grabar criterio'>
</body>
</html>